<template>
	<view class="box-bg">
		<uni-nav-bar statusBar="true" shadow="true" backgroundColor="#05132d">
			<view class="input-view">
				<uni-icons class="input-uni-icon" type="search" size="18" color="#999" @click="sear"/>
				<input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词" v-model="data" @keydown.enter="sear" />
			
			</view>
				
				
			
		</uni-nav-bar>

	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				data:""
			}
		},
		props:["search"],
		methods: {
			sear(){
				if (!this.data.trim()) return alert('输入不能为空')
				        //将输入包装成todoObj对象
				       // const todoObj = { id: nanoid(), name: this.title, done: false }
				        //调用父组件传来的函数，更新父组件中的todos数组
				        //this.addTodo(todoObj)
				console.log(this.data)
				this.search(this.data)
				        //清空输入
				this.data=''
			}
		}
	}
</script>

<style lang="scss" scoped>
	$nav-height: 55rpx;

	.box-bg {
		background-color: #05132d;

		height: 120rpx;
	}

	

	.input-view {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;

		flex: 1;
		background-color: #f8f8f8;
		height: $nav-height;
		border-radius: 15px;
		padding: 0 5px;
		flex-wrap: nowrap;

		line-height: $nav-height;
	}

	

	.nav-bar-input {
		height: $nav-height;
		//width: 700rpx;
		line-height: $nav-height;
		/* #ifdef APP-PLUS-NVUE */
		//width: 370rpx;
		/* #endif */
		padding: 0 5px;
		font-size: 11px;

		background-color: #f8f8f8;
	}
</style>


